<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="楼盘名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="楼盘地址" prop="address">
            <el-cascader
              :options="regions"
              :props="props"
              @change="handleChange"
              clearable></el-cascader>
          </el-form-item>
          <el-form-item label="商圈" prop="commercialArea">
            <el-input v-model="ruleForm.commercialArea" placeholder="请输入商圈"/>
          </el-form-item>
          <el-form-item label="地铁" prop="subway">
            <el-input v-model="ruleForm.subway" placeholder="请输入地铁"/>
          </el-form-item>
          <el-form-item label="建筑面积" prop="proportion">
            <el-input v-model="ruleForm.proportion"></el-input>
          </el-form-item>
          <el-form-item label="建筑类型" prop="buildingType">
            <el-checkbox-group v-model="ruleForm.buildingType">

            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="社区类型" prop="communityType">
            <el-select v-model="ruleForm.communityType" placeholder="请选择社区类型">
              <el-option label="普通住宅" value="普通住宅"></el-option>
              <el-option label="公寓商住两用" value="公寓商住两用"></el-option>
              <el-option label="别墅" value="别墅"></el-option>
              <el-option label="海景房" value="海景房"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物业类型" prop="introduce">
            <el-select v-model="ruleForm.premisesType" placeholder="请选择物业类型">
              <el-option label="普通住宅" value="0"></el-option>
              <el-option label="公寓" value="1"></el-option>
              <el-option label="商住两用" value="2"></el-option>
              <el-option label="商业地产" value="3"></el-option>
              <el-option label="写字楼" value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="容积率" prop="grossplotratio">
            <el-input v-model="ruleForm.grossPlotRatio"></el-input>
          </el-form-item>
          <el-form-item label="得房率" prop="efficiency">
            <el-input v-model="ruleForm.efficiency"></el-input>
          </el-form-item>
          <el-form-item label="绿化率" prop="greenCoverage">
            <el-input v-model="ruleForm.greenCoverage"></el-input>
          </el-form-item>
          <el-form-item label="楼栋数" prop="buildingCount">
            <el-input v-model="ruleForm.buildingCount"></el-input>
          </el-form-item>
          <el-form-item label="开发商" prop="developer">
            <el-input v-model="ruleForm.developer"></el-input>
          </el-form-item>
          <el-form-item label="物业管理公司" prop="estate">
            <el-input v-model="ruleForm.estate"></el-input>
          </el-form-item>
          <el-form-item label="物业类型" prop="introduce">
            <el-select v-model="ruleForm.premisesType" placeholder="请选择物业类型">
              <el-option label="普通住宅" value="0"></el-option>
              <el-option label="公寓" value="1"></el-option>
              <el-option label="商住两用" value="2"></el-option>
              <el-option label="商业地产" value="3"></el-option>
              <el-option label="写字楼" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="楼盘简介" prop="introduce">
            <el-input v-model="ruleForm.introduce"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save('ruleForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>


      <el-tab-pane label="相册管理" name="second">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="外景图">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/houses/file/uploadd"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="施工图">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/houses/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="效果图">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/houses/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="首页图">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/houses/file/uploadd"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="">立即提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {savehouses, treeRegion, upload} from "@/api/wishu/houses/houses"

export default {
  name: "saveView",
  data() {
    return {
      activeName: 'first',
      ruleForm: {
        province: '',
        city: '',
        county: '',
      },
      regions: [],
      props: {
        value: 'id',
        label: 'name',
      },
      form: {},
      imageUrl: '',
      rules: {
        name: [
          {required: true, message: '请输入楼盘名称', trigger: 'blur'},
        ],
        address: [
          {required: true, message: '请输入楼盘地址', trigger: 'blur'},
        ],
      }
    }
  }, methods: {
    uploadUrl() {
      upload().then(qwe => {
        console.log(qwe)
      })
    },
    save() {
      savehouses(this.ruleForm).then(qwe => {
        if (qwe.code == 200) {
          this.$message.success(qwe.msg);
          this.$router.push("list");
        } else {
          this.$message.error(qwe.msg);
        }
      })
    },
    handleAvatarSuccess(url) {
      console.log(url)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleChange(value) {
      this.ruleForm.province = value[1];
      this.ruleForm.city = value[2];
      this.ruleForm.county = value[3];
    },
    getregion() {
      treeRegion().then(response => {
        this.regions = response.list;
      })
    },
  }, created() {
    this.getregion();
  }
}
</script>

<style scoped>

</style>
